<!--
* @description 安全态势
* @author zywu
* @date 2021/01/05 19:50:11
!-->
<template>
  <li class="item">
    <p class="item-tt">{{period==2?'本月':'本季度'}}安全态势</p>
    <div class="securityChars" id="securityChars">
      <!-- 月报 -->
      <div v-if="period==2" class="my-calendar">
        <div v-for="(n,i) in dataList" :key="i" class="my-calendar__row">
          <div v-for="(m,i) in n" :key="i" :class="m.className" class="my-calendar__cell">{{m.day}}</div>
        </div>
        <div class="my-calendar__row">
          <span class="my-calendar__week">周一</span>
          <span class="my-calendar__week">周二</span>
          <span class="my-calendar__week">周三</span>
          <span class="my-calendar__week">周四</span>
          <span class="my-calendar__week">周五</span>
          <span class="my-calendar__week">周六</span>
          <span class="my-calendar__week">周日</span>
        </div>
      </div>
      <!-- 季报 -->
      <div v-else-if="period==5" ref="chartDom" style="height:480px;"></div>
    </div>
    <div class="charsStatistics" style="margin-top:20px;">
      <div class="charsStatistics-item">
        <div id="charsStatistics-urgent" class="chart"></div>
        <div class="centerValue">
          <span id="urgentHourView">{{parseFloat(securitySituation.urgentHour||0)}}</span>
          <label>小时</label>
        </div>
        <p>
          <label style="font-szie:12px;color:#FA7C5A">告急</label>
        </p>
      </div>
      <div class="charsStatistics-item">
        <div id="charsStatistics-danger" class="chart"></div>
        <div class="centerValue">
          <span id="dangerHourView">{{parseFloat(securitySituation.dangerHour||0)}}</span>
          <label>小时</label>
        </div>
        <p style="font-szie:12px;color:#FFBC37">危险</p>
      </div>
      <div class="charsStatistics-item">
        <div id="charsStatistics-normal" class="chart"></div>
        <div class="centerValue">
          <span id="securityHourView">{{parseFloat(securitySituation.securityHour||0)}}</span>
          <label>小时</label>
        </div>
        <p style="font-szie:12px;color:#75CD7E">安全</p>
      </div>
    </div>
  </li>
</template>

<script>
var option = {
  tooltip: {},
  calendar: {
    top: 'middle',
    left: 'center',
    orient: 'vertical',
    cellSize: 30,
    yearLabel: {
      show: false,
      margin: 50,
      textStyle: {
        fontSize: 30,
      },
    },
    dayLabel: {
      firstDay: 1,
      nameMap: 'cn',
      textStyle: {
        color: '#666',
      },
    },
    monthLabel: {
      nameMap: 'cn',
      margin: 10,
      textStyle: {
        fontSize: 14,
        color: '#666',
      },
    },
    range: ['2017-02', '2017-03-31'],
  },
  grid: {
    // left:'100px'
  },
  visualMap: {
    show: false,
    min: 1,
    max: 3,
    type: 'piecewise',
    top: 0,
    left: 'center',
    bottom: 20,
    seriesIndex: [1],
    orient: 'horizontal',
    inRange: {
      color: ['#fa7c5a', '#ffbc37', '#75cd7e'],
    },
  },
  series: [
    {
      type: 'graph',
      edgeSymbol: ['none', 'arrow'],
      coordinateSystem: 'calendar',

      symbolSize: 0,
      calendarIndex: 0,
      itemStyle: {},

      data: [],
      z: 20,
    },
    {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: [],
      tooltip: {
        formatter: function (params) {
          return ['', '告急', '危险', '安全'][params.data[1]]
        },
      },
    },
  ],
}
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
    period: {
      type: [Number, String],
      default: '',
    },
    periodName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      securitySituation: {},
      dataList: [],
      dayMap:{}
    }
  },

  components: {},

  computed: {},

  created() {},

  mounted() {
    let data = this.reportData
    let securitySituation = data.securitySituation
    this.securitySituation = securitySituation
    var urgentHour = parseFloat(securitySituation.urgentHour)
    var dangerHour = parseFloat(securitySituation.dangerHour)
    var securityHour = parseFloat(securitySituation.securityHour)
    this.initPieChart(
      (urgentHour / (urgentHour + dangerHour + securityHour)) * 100,
      'charsStatistics-urgent',
      '#FA7C5A'
    )
    this.initPieChart(
      (dangerHour / (urgentHour + dangerHour + securityHour)) * 100,
      'charsStatistics-danger',
      '#FFBC37'
    )
    this.initPieChart(
      (securityHour / (urgentHour + dangerHour + securityHour)) * 100,
      'charsStatistics-normal',
      '#75CD7E'
    )

    // 季报
    if (this.period == 5) {
      this.renderQuarterChart(data)
    } else if (this.period == 2) {
      this.renderMonthChart(securitySituation)
    }
  },

  methods: {
    // 月报图表
    renderMonthChart(securitySituation) {
      securitySituation.dataList.map((n) => {
        let day=Number(n.time.split('-')[2]).toString()
        this.dayMap[day]={
          time:n.time,
          className:n.type == 1 ? 'is-urgent' : n.type == 2 ? 'is-danger' : 'is-safe'
        }
      })
      let month=securitySituation.dataList[0].time.substr(0,8)
      let monthEnd=this.$moment(securitySituation.dataList[0].time,'YYYY-MM-DD').endOf('month').toDate().getDate()
      let list=[]
      for(let i=1;i<=monthEnd;i++){
        let one=this.dayMap[i.toString()]
        list.push({
          day:i,
          className:one?one.className:'',
          time:`${month}${i<10?'0':''}${i}`,
        })
      }
      let start = list[0].time
      let startArr = start.split('-')
      let end = list[list.length - 1].time
      let endArr = end.split('-')
      let startDate = new Date(startArr[0], startArr[1] - 1, startArr[2])
      let startDateTime = startDate.getTime()
      let endDate = new Date(endArr[0], endArr[1] - 1, endArr[2])
      let endDateTime = endDate.getTime()
      let startDay = startDate.getDay()
      let endDay = endDate.getDay()
      let before = []
      let after = []
      if (startDay != 1) {
        let dist = startDay == 0 ? 6 : startDay - 1
        for (var i = dist; i > 0; i--) {
          before.push({
            day: new Date(startDateTime - 24 * 60 * 60000 * i).getDate(),
            className: 'is-disabled',
          })
        }
      }
      if (endDay != 0) {
        let dist = 7 - endDay
        for (var i = 1; i <= dist; i++) {
          after.push({
            day: new Date(endDateTime + 24 * 60 * 60000 * i).getDate(),
            className: 'is-disabled',
          })
        }
      }
      let newList = before.concat(list).concat(after)
      let groupList = []
      let len = newList.length / 7
      for (var i = 0; i < len; i++) {
        groupList.push(newList.splice(0, 7))
      }
      this.dataList = groupList
      console.log(groupList)
    },
    // 季报图表
    renderQuarterChart(data) {
      let myChart = echarts.init(this.$refs.chartDom)
      option.calendar.range = [data.startDate, data.endDate]
      option.series[1].data = this.securitySituation.dataList.map((n) => {
        return [echarts.format.formatTime('yyyy-MM-dd', n.time), n.type]
      })
      myChart.setOption(option)
    },
    initPieChart(value, viewId, color) {
      let myChart = echarts.init(document.getElementById(viewId))
      let option = {
        color: [color, '#F1F1F1'],
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['90%', '100%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold',
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: value,
                name: '',
              },
              {
                value: 100 - value,
                name: '',
              },
            ],
          },
        ],
      }
      myChart.setOption(option, true)
    },
  },
}
</script>
<style lang='scss'>
.securityChars {
  padding: 0 8px;
  box-sizing: border-box;
}
.my-calendar {
  &__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__week {
    padding: 10px 0;
    color: #b1b1b1;
    font-size: 12px;
    text-align: center;
  }
  &__cell {
    float: left;
    margin: 5px 0;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 28px;
    background-color: #a0cfff;
    &.is-disabled {
      background-color: #fff;
      color: #cdcdcd;
    }
    &.is-urgent {
      background-color: #fa7c5a;
    }
    &.is-danger {
      background-color: #ffbc37;
    }
    &.is-safe {
      background-color: #75cd7e;
    }
  }
}
</style>